<template>
	<view class="addbox">
		<view class="add-li">
			<view class="add-title">
				{{$t('index.sjrxm')}}
			</view>
			<view class="add-input">
				<uni-easyinput v-model="name" :placeholder="$t('index.qsrzsxm')"></uni-easyinput>
			</view>
		</view>
		<view class="add-li">
			<view class="add-title">
				{{$t('index.sjhm')}}
			</view>
			<view class="add-input phone-li">
				<view class="phone-qh">
					<uni-data-select v-model="qh" :localdata="range" @change="changeQh"
						:disabled="true"></uni-data-select>
				</view>
				<view class="phone-num">
					<uni-easyinput v-model="phone" :placeholder="$t('index.qsrsjh')"></uni-easyinput>
				</view>
			</view>
		</view>
		<!-- <view class="add-li">
			<view class="add-title">
				省
			</view>
			<view class="add-input">
				<view class="phone-qh">
					<uni-data-select v-model="provinceid" :localdata="provinceRange"
						@change="changeProvince"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="add-li">
			<view class="add-title">
				县市
			</view>
			<view class="add-input">
				<view class="phone-qh">
					<uni-data-select v-model="cityid" :localdata="cityRange" @change="changeCity"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="add-li">
			<view class="add-title">
				地区
			</view>
			<view class="add-input">
				<view class="phone-qh">
					<uni-data-select v-model="areaid" :localdata="areaRange" @change="changeArea"></uni-data-select>
				</view>
			</view>
		</view> -->
		<view class="add-li">
			<view class="add-title">
				{{$t('index.z')}}
			</view>
			<view class="add-input">
				<uni-easyinput v-model="address" :placeholder="$t('index.qsrshdz')"></uni-easyinput>
			</view>
		</view>
		<view class="add-li">
			<view class="add-title">
				{{$t('index.yzbm')}}
			</view>
			<view class="add-input">
				<uni-easyinput v-model="postal_code" :placeholder="$t('index.qsryzbm')"></uni-easyinput>
			</view>
		</view>
		<view class="add-btn">
			<view class="back">
				<button @click="cancle">{{$t('index.qx')}}</button>
			</view>
			<view class="sure">
				<button :disabled="loading" :loading="loading" @click="sure">{{$t('index.qr')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		areaLst
	} from "@/api/api.js"
	import {
		addrAddEdit
	} from "@/api/user.js"
	export default {
		data() {
			return {
				loading: false,
				qh: 0,
				range: [{
					value: 0,
					text: "+886"
				}],
				provinceRange: [],
				cityRange: [],
				areaRange: [],
				area: [],
				provinceid: '',
				cityid: '',
				areaid: '',
				name: '',
				phone: '',
				address: '',
				region_index: [0, 0, 0]
			}
		},
		props: {
			item: {
				typeof: String,
				default () {
					return {
						id: '',
						name: "",
						phone: "",
						region_ids: "",
						address: "",
						postal_code: ""
					}
				}
			}
		},
		async created() {
			// let data = await areaLst()
			// this.area = data.data
			this.provinceRange = this.area
			this.name = this.item.name
			this.phone = this.item.phone
			// if (this.item && this.item.region_ids != '') {
			// 	let arr = this.item.region_ids.split(',')
			// 	this.provinceid = Number(arr[0])
			// 	this.cityid = Number(arr[1])
			// 	this.areaid = Number(arr[2])

			// 	let index = this.provinceRange.findIndex(item => item.value == this.provinceid)
			// 	this.cityRange = this.provinceRange[index].children
			// 	let index2 = this.cityRange.findIndex(item => item.value == this.cityid)
			// 	this.areaRange = this.cityRange[index2].children
			// }
			this.address = this.item.address
			this.postal_code = this.item.postal_code
		},
		methods: {
			areaLst() {
				areaLst().then(res => {
					this.area = res.data
					this.provinceRange = this.area
				})
			},
			cancle() {
				this.$emit('cancle')
			},
			sure() {
				var that = this
				that.loading = true
				addrAddEdit({
					id: that.item.id,
					name: that.name,
					phone: that.phone,
					address: that.address,
					postal_code: that.postal_code,
					// provinceid: that.provinceid,
					// cityid: that.cityid,
					// areaid: that.areaid,
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						let data = res.data
						this.$emit('sure', data)
					} else {
						that.loading = false
					}
				})

			},
			// 选择区号
			changeQh(e) {

			},
			changeProvince(e) {
				this.provinceid = e
				if (e != '') {
					let index = this.provinceRange.findIndex(item => item.id == e)
					this.region_index[0] = index
					this.cityRange = this.provinceRange[index].children
				} else {
					this.cityRange = [];
				}
				this.areaRange = []
			},
			// 选择县市
			changeCity(e) {
				this.cityid = e
				if (e != '') {
					let index = this.cityRange.findIndex(item => item.id == e)
					this.region_index[1] = index
					this.areaRange = this.cityRange[index].children
				} else {
					this.areaRange = [];
				}
			},
			// 选择地区
			changeArea(e) {
				this.areaid = e
			},
		}
	}
</script>

<style lang="scss">
	.add-btn {
		display: flex;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		justify-content: center;

		button {
			border-radius: 4.5px;
			font-size: 14px;
			text-align: center;
			box-sizing: border-box;
			display: inline-block;
			cursor: pointer;
			width: 100%;
			height: 40px;
			line-height: 40px;
			width: 100%;
		}

		.back {
			max-width: 150px;
			width: 50%;
			margin-right: 20px;

			button {
				background-color: #fff;
				color: #ff5353;
				border: 1px solid #ff5353;
			}
		}

		.sure {
			max-width: 150px;
			width: 50%;

			button {
				background: #ff5353;
				color: #fff;
			}
		}
	}

	.addbox {
		background: #fff;
		padding: 10px 0;
		box-sizing: border-box;
		margin: 10px auto;
		display: flex;
		flex-wrap: wrap;
	}

	.add-li {
		padding: 0 10px;
		box-sizing: border-box;
		width: 50%;
		margin-bottom: 10px;

		&.tw {
			display: none;
		}

		.add-title {
			margin-bottom: 10px;
			font-size: 14px;
		}

		.phone-li {
			display: flex;
			justify-content: space-between;

			.phone-qh {
				width: 25%;
			}

			.phone-num {
				width: 72%;
			}
		}


	}

	@media (max-width:768px) {
		.add-li {
			width: 100%;

			&.tw {
				display: block;
			}
		}


	}
</style>